<template>
    <div class="registration-wrapper">
        <nav-com :navText="navText" :navTextDes="navTextDes"></nav-com>

        <div class="content">
            <div class="nav-bar-separate">
                <span class="left">
                    窗口：{{windowName}}
                </span>
                    <span class="right" @click="windowOrgidClick">
                    本日已完成：{{windowOrgid}}个
                </span>
            </div>

            <div class="number">
                <div class="order">
                    <Input v-model="value" placeholder="" style="width: 300px" />
                    <span class="text">预约取号</span>
                </div>
                <div class="directly" @click="direct"><span class="text">直接取号</span></div>
            </div>

        </div>

        <div class="take-number">
            <Input v-model="numberValue" placeholder="搜索取号码" style="width: 242px" />
            <Button @click="search"><img src="../../../static/images/search.png"><span>搜索</span></Button>
        </div>

        <div class="registration-list" :style="{ minHeight: height-390+'px'}">
            <h4 @click="test">挂号列表</h4>
            <ul>
                <li v-for="(item,index) in turnList">
                    <div class="top">
                        <div class="take-numbers">
                            <span v-if="item.type==0" class="take">直接取号</span>
                            <span v-else-if="item.type==1" class="take">预约取号</span>

                            <span v-if="item.status==0" class="wait">已叫号</span>
                            <span v-else class="wait">等待中</span>
                        </div>
                        <div class="center">
                            <h4 class="num">{{item.num}}</h4>
                            <p class="des">排对号码</p>
                        </div>
                    </div>
                    <div class="btn-con">
                        <div class="turn-cancel" v-if="item.status==0">
                            <a class="turn-btn" @click="turn(item)">叫号</a>
                            <a class="cancel-btn" @click="cancel(item)">取消</a>
                        </div>
                        <a class="registere-btn" @click="registere(item)">挂号</a>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    import navCom from '@/components/nav-com.vue';
    import {turnlist, getTurn,cancelOver,turncall,turnguahao} from '@/api/inoculate/inoculate';

    export default {
        data () {
            return {
                navText: '挂号接种',
                navTextDes: '挂号',
                height: document.documentElement.clientHeight,
                windowName: '',
                windowOrgid: null,
                turnList: [],
                numberValue: '',

                value: '',

            }
        },
        mounted(){
          this.getTurnlist();
        },
        methods: {
            test(){
                this.$router.push({path: '/home/registeredprocess'});
            },
            // 挂号列表
            getTurnlist () {
                turnlist().then((res) => {
                    if(res.data.error==0){
                        this.windowName = res.data.window.name;
                        this.windowOrgid = res.data.window.orgid;
                        this.turnList = res.data.list;
                    }
                })
            },
            getTurnlistId(id){
                turnlist({
                    num:id
                }).then((res) => {
                    if(res.data.error==0){
                        this.turnList = res.data.list;
                    }
                })
            },
            //  直接取号
            direct(){
                getTurn().then((res) => {
                    if(res.data.error==0){
                        this.getTurnlistId(res.data.turn.num)
                    }
                })
            },
            //  搜索
            search(){
                this.getTurnlistId(this.numberValue);
            },
            // 取消
            cancel(val){
                this.$Modal.confirm({
                    title: '',
                    content: '是否确定取消当前挂号？',
                    onOk: () => {
                        cancelOver({
                            id:val.id
                        }).then((res) => {
                            if(res.data.error==0){
                                this.getTurnlist();
                            }
                        })
                    }
                });

            },
            //  叫号
            turn(val){
                let that=this;
               turncall({
                    id:val.id
                }).then((res) => {
                    if(res.data.error==0){
                        that.$Message.info({
                            content: '叫号成功',
                            duration: 2,
                            onClose:()=>{
                                that.getTurnlist();
                            }
                        });
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })

            },
            //  挂号
            registere(val){
                turnguahao({
                    id:val.id
                }).then((res) => {
                    if(res.data.error==0){
                        this.$router.push({path: '/home/registeredprocess'});
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })
            },
            windowOrgidClick(){
                this.$router.push({path: '/home/rehandle'});
            }
        },
        components: {
            navCom
        },
    }
</script>

<style lang="less">
    .registration-wrapper{
        .content{
            background: #fff;
            padding:20px 10px;
            .nav-bar-separate{
                display: flex;
                .left{
                    flex:0 0 250px;
                    background:rgba(245,246,251,1);
                    padding: 10px 10px 10px 18px;
                    font-size:18px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(53,76,107,1);
                }
                .right{
                    flex:1;
                    background:rgba(245,246,251,1);
                    padding: 10px 0 10px 20px;
                    font-size:18px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(53,76,107,1);
                    margin-left:10px;
                    cursor: pointer;
                }
            }
            .number{
                display: flex;
                text-align: center;
                margin-top:20px;
                .order{
                    flex: 1;
                    background:rgba(38,216,192,1);
                    border-radius:5px;
                    margin-right: 10px;
                    height: 108px;
                    padding-top:34px;
                    .ivu-input{
                        height:40px;
                        background:rgba(255,255,255,1);
                        opacity:0.4;
                        border-radius:5px;
                    }
                    .text{
                        vertical-align: middle;
                        margin-left:10px;
                    }
                }
                .directly{
                    flex: 1;
                    background:rgba(47,148,254,1);
                    border-radius:5px;
                    height: 108px;
                    padding-top:40px;
                }
                .text{
                    font-size:20px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    line-height:25px;
                }
            }
        }
        .take-number{
            margin-top: 10px;
            .ivu-input{
                height:40px;
                line-height: 40px;
                background:rgba(255,255,255,1);
                border:1px solid rgba(227,229,235,1);
                font-size:14px;
                border-radius: 0;
            }
            .ivu-btn{
                width:77px;
                height:40px;
                background:rgba(47,148,254,1);
                border-radius: 0;
                margin-left: -4px;
                padding: 6px 10px;
                img{
                    width:17px;
                    height: 18px;
                    margin-right: 5px;
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                    font-size:16px;
                    font-family:PingFang-SC-Bold;
                    color:rgba(255,255,255,1);
                }
            }
        }
        .registration-list{
            background: #fff;
            padding:20px 10px;
            h4{
                height:34px;
                line-height: 34px;
                background:rgba(245,246,251,1);
                font-size:18px;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(53,76,107,1);
                padding-left:18px;
            }
            ul{
                margin-top:20px;
                li{
                    list-style: none;
                    display: inline-block;
                    margin:0 40px 20px 0;
                    width:222px;
                    height: 282px;
                    vertical-align: top;
                    .top{
                        .take-numbers{
                            height:34px;
                            line-height: 34px;
                            .take{
                                font-size:14px;
                                font-family:PingFang-SC-Regular;
                                font-weight:400;
                                color:rgba(255,255,255,1);
                                margin-left: 10px;
                            }
                            .wait{
                                font-size:14x;
                                font-family:PingFang-SC-Bold;
                                font-weight:bold;
                                color:rgba(45,210,193,1);
                                float: right;
                                margin-right: 10px;
                            }
                        }
                        .center{
                            width:222px;
                            height:148px;
                            background:rgba(247,249,255,1);
                            border:1px solid rgba(93,141,251,1);
                            .num{
                                padding-left:0;
                                text-align: center;
                                font-size:36px;
                                font-family:PingFang-SC-Bold;
                                font-weight:bold;
                                color:rgba(45,210,193,1);
                                margin-top:36px;
                            }
                            .des{
                                text-align: center;
                                font-size:16px;
                                font-family:PingFang-SC-Regular;
                                font-weight:400;
                                color:rgba(45,210,193,1);
                                margin-top:12px;
                            }
                        }

                    }
                    .btn-con{
                        .turn-cancel{
                            a{
                                width:106px;
                                height:42px;
                                line-height:42px;
                                border-radius:4px;
                                font-size:14px;
                                font-family:PingFang-SC-Bold;
                                color:rgba(255,255,255,1);
                                display: inline-block;
                                text-align: center;
                            }
                            .turn-btn{
                                background:rgba(138,130,249,1);
                                margin:10px 6px 0px 0;
                            }
                            .cancel-btn{
                                background:rgba(209,217,238,1);
                            }
                        }
                        .registere-btn{
                            width:222px;
                            height:42px;
                            line-height: 42px;
                            background:rgba(138,130,249,1);
                            border-radius:4px;
                            font-size:14px;
                            font-family:PingFang-SC-Bold;
                            color:rgba(255,255,255,1);
                            display: inline-block;
                            text-align: center;
                            margin-top:8px;
                        }
                    }
                    &:nth-child(odd){  // 奇数
                        .take-numbers{
                            background:rgba(93,141,251,1);
                        }
                        .btn-con{
                            .turn-btn,.registere-btn{
                                background: #5D8EFC;
                            }
                        }
                    }
                    &:nth-child(even){ // 偶数
                        .take-numbers{
                            background:rgba(138,130,249,1);
                        }
                        .center{
                            border:1px solid rgba(138,130,249,1);
                        }
                    }
                }
            }
        }
    }
</style>
